<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>重置密码</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" type="text/css" media="screen" href="./css/reset.css" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div class="wrapper ">
        <div class="top">
            <div class="back" onclick="javascript:history.back()"></div>
        </div> 
            <div id="layer-check-phonenumber" class="form-container check-phonenumber">
                        <div class="title">
                            <h2 class="h2t">重置密码</h2>
                        </div>
                        <div class="cell phone-cell">
                            <input class="c_inp phone-number" type="text" placeholder="手机号码" maxlength="11">
                            <div class="b-line"></div>
                        </div>
                        <div class="cell text-code">
                            <input class="c_inp" type="text" placeholder="短信验证码">
                            <div class="b-line"></div>
                        </div>
                        <input type="button" class="sb-btn" id="btn-next" value="下一步">
            </div>

            <div id="layer-reset" class="form-container reset">
                <div class="title">
                    <h2>重置密码</h2>
                </div>
                <div class="cell password-cell">
                    <input class="c_inp password" type="password" placeholder="设置密码,密码为6-16位字符,区分大小写" maxlength="16">
                    <div class="b-line"></div>
                </div>
                <div class="cell password-cell">
                    <input class="c_inp comfirm-password" type="password" placeholder="确认密码" maxlength="16">
                    <div class="b-line"></div>
                </div>
                <button class="submit" id="btn-login">重置密码</button>
            </div>

            <div id="layer-succeed" class="form-container succeed">
                <div class="icon"><img src="img/icon.png"></div>
                <div class="des1">重置成功</div>
                <div class="des2">请牢记您的密码</div>
                <button class="submit asdaousi"><a href="./login.html">立即登录</a></button>
            </div>
        </div>

        <script>
            $(document).ready(function () {
                $("#layer-reset").hide();
                $("#layer-succeed").hide();
                $(".text-code").attr('data-text', '短信验证码');

                $('#btn-next').click(function () {
                    $("#layer-check-phonenumber").hide();
                    $("#layer-reset").show();
                })
                $(".back").click(function () {
                    $("#layer-check-phonenumber").show();
                    $("#layer-reset").hide();
                })

                $('#btn-login').click(function () {
                    $("#layer-reset").hide();
                    $("#layer-succeed").show();
                    $(".top").hide();
                })

                $("[data-text]").click(function () {
                    console.log('发送验证码');
                    $(".text-code").attr('data-text', '已发送(59s)');
                })
                //清空电话
                $(".phone-cell").click(function (ev) {
                    if (ev.target.className.indexOf('phone-cell') !== -1) {
                        console.log(ev.target.children);
                        console.log('电话号码已清空');
                        ev.target.children[0].value = "";
                    }
                })
                //密码显示与隐藏
                $(".password-cell").click(function (ev) {
                    if (ev.target.className.indexOf('password-cell') !== -1) {
                        var that = $(this);
                        var inp = that.find('input');
                        var type = inp.prop("type");
                        inp.prop("type", type === "text" ? 'password' : 'text');

                    }
                })

            });
        </script>
</body>

</html>